<template>
    <ul class="msglist">
        <li v-for="(dt,index) in lists" :key="index" @click="lookDetail(dt)">
            <div class="con">
                <h5>
                    <span>[农事建议]</span>
                    <s>{{dt.createTime}}</s>
                </h5>
                <p>{{dt.title}}</p>
            </div>
            <div class="jt">
                <el-icon><ArrowRight /></el-icon>
            </div>
        </li>
        <div v-if="lists && lists.length<1" style="text-align: center;padding:20px 0">暂无数据</div>
        <div class="more" v-if="lists && lists.length<total"><span @click="loadMore">点击加载更多</span></div>
    </ul>
    <c-dialog v-model:show="dialogFlag" v-if="dialogFlag" title="消息详情" :showBtn="false" width="600px">
        <div class="msgDetailBox">
            <h1>{{detail.title}}</h1>
            <div class="tipsbox">
                <span>发布时间：{{detail.createTime}}</span>
                <!-- <span style="padding-left:20px ;">来源：大幅度发的多多多所</span> -->
            </div>
            <div class="msgMainCon" v-html="detail.content" style="white-space:pre-line;"></div>
        </div>
    </c-dialog>
</template>
<script setup>
import {ref,onMounted} from "vue"
import cDialog from '@/components/custom/cDialog.vue'
import {getNotifyList} from '@/api/plant'
import { useUserStore } from '@/pinia/modules/user'
const userStore = useUserStore()

const dialogFlag = ref(false)
const limit = ref(20)
const page = ref(1)
const lists = ref('')
const total = ref(0)
const detail = ref({})

onMounted(async ()=>{
    get_notify_list()
})

const get_notify_list = async ()=>{
    const res = await getNotifyList({
        limit:limit.value,
        page:page.value,
        receiverId:userStore.userInfo.companyId
    })
    total.value = res.total
    if(page.value== 1){
        lists.value = res.data
    }else{
        lists.value = [...lists.value,...res.data]
    }
}

const loadMore = ()=>{
    page.value++
    get_notify_list()
}

const lookDetail=(item)=>{
    detail.value = item
    dialogFlag.value=true
}

</script>
<style lang="scss" scoped>
.msglist{
    padding: 10px 0 0 0;
    margin: 0;
    list-style: none;
    min-height:680px;
    max-height: calc(100vh - 213px);
    overflow: hidden;
    overflow-y: auto;
    li{
        display: flex;
        box-sizing: border-box;
        align-items: center;
        background-color: #f8f9f9;
        padding: 10px;
        &+li{
            margin-top: 10px;
        }
        &:hover{
            background-color: #eef0f1;
            cursor: pointer;
        }
        .con{
            flex: 1;
            line-height: 24px;
            h5{
                display: flex;
                font-size: 12px;
                font-weight: normal;
                align-items: center;
                span{
                    flex: 1;
                }
                s{
                    font-style: normal;
                    text-decoration: none;
                    color: #999;
                }
            }
            p{
                padding: 0;
                margin: 0;
            }
        }
        .jt{
            display: flex;
            height: 100%;
            width: 30px;
            align-items: center;
            justify-content: end;
        }
    }
}
</style>
<style lang="scss">
.msgDetailBox{
    color: #333;
    h1{
        padding: 10px 0 0 0;
        font-size: 16px;
        //font-weight: normal;
        text-align: center;
        color: #333;
    }
    .tipsbox{
        text-align: center;
        font-size: 12px;
        color: #999;
        padding: 15px 0;
    }
    .msgMainCon{
        line-height: 24px;
        img{
            display: block;
            width: 100%;
        }
    }
}
.more{
    text-align: center;
    padding: 10px 0;
    color: #999;
    span{
        &:hover{
            color: #333;
            cursor: pointer;
        }
    }
}
</style>